<template>
  <div>
    <div class="header">
      <span style="margin-right: 10px">搜索用户数</span>
      <i class="el-icon-info iconFont"></i>
    </div>
    <div class="main">
      <span style="margin-right: 30px; font-size: 18px">12321</span>
      <span style="margin-right: 10px">17.1</span>
      <i class="el-icon-caret-top"></i>
      <i class="el-icon-caret-bottom"></i>
    </div>
    <div class="footer">
        <div class="charts" ref="charts"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    mounted() {
    let lineCharts = echarts.init(this.$refs.charts);
    //配置数据
    lineCharts.setOption({
      xAxis: {
        show: false,
        type: "category",
      },
      yAxis: {
        show: false,
      },
      series: [
        {
          type: "line",
          data: [20, 10, 35, 15, 25, 35,20.10, 35, 15],
          itemStyle: {
            opacity: 0,
          },
          lineStyle: {
            color: "blue",
          },
          areaStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "blue",
                },
                {
                  offset: 1,
                  color: "#fff",
                },
              ],
              global: false,
            },
          },
           smooth: true
        },
      ],
      //布局调试
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
    });
  },
};
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
}
.iconFont {
  color: #ccc;
}
.main {
    margin: 10px 0;
}
.charts {
    width: 100%;
    height: 50px;
}
</style>
